<template>
  <div class="show-code">
    <!-- <header-bar
      v-if="!$route.meta.hideHeader"
      ref="header"
      :title="title"
    >
      <template v-if="$store.state.user.show" />
    </header-bar>-->
    <div ref="content" class="order-content">
      <div class="mixing-station message message-title">
        <div class="icon-title van-cell order-title">
          <svg-icon icon-class="user" class="icon-class" />
          <span class="icon-title-content">基本信息</span>
        </div>

        <van-field
          v-model="room.organizationName"
          label="隔离点名称"
          placeholder="请输入隔离点名称"
          readonly
        />
        <van-field
          v-show="$route.query.id"
          v-model="room.address"
          label="隔离点地址"
          placeholder="请输入隔离点地址"
          readonly
        />

        <van-field
          v-model="room.roomNum"
          label="房号"
          placeholder="请输入房号"
          type="number"
          required
        />
        <van-field
          v-model="room.buildNo"
          label="楼栋"
          placeholder="请输入楼栋"
        />
        <van-field
          v-model="room.floor"
          label="楼层"
          placeholder="请输入楼层"
          type="number"
          required
        />
        <van-cell v-show="room.status===3" class="van-cell--required" title="消杀结束时间" :value="room.disinfectionOver" is-link @click="getTime" />

        <van-cell class="van-cell--required" title="房间类型" :value="room.typeText" is-link @click="getType" />
        <van-cell class="van-cell--required" title="状态" :value="room.statusText" is-link @click="getAdmin" />
        <van-cell class="van-cell--required" title="房间启用类型" :value="room.roomTimeText" is-link @click="getRoom" />

      </div>

      <!-- <div class="mixing-station">
        <van-field
          v-model="remark"
          rows="2"
          autosize
          label="备注"
          type="textarea"
          placeholder="请输入备注":disabled="state.toString()==='0'"
          show-word-limit
        />
      </div> -->
      <div class="content-info-submit">
        <van-button
          type="info"
          class="van-confirm confirm-message"
          style="margin-bottom:20px;"
          @click="submit"
        >{{ btnName }}</van-button>
      </div>
      <div style="width:100%;height:100px;" :class="[showTitlePaddingTop?'title-message':'']" />
    </div>
    <van-popup v-model="showAre" position="bottom" :style="{ height: '50%' }">
      <van-picker
        title="状态"
        show-toolbar
        :columns="columnAre"
        @confirm="onConfirmAre"
        @cancel="showAre=false"
      />
    </van-popup>
    <van-popup v-model="showType" position="bottom" :style="{ height: '50%' }">
      <van-picker
        title="房间类型"
        show-toolbar
        :columns="columnType"
        @confirm="onConfirmType"
        @cancel="showAre=false"
      />
    </van-popup>
    <van-popup v-model="showRoomType" position="bottom" :style="{ height: '50%' }">
      <van-picker
        title="房间启用类型"
        show-toolbar
        :columns="roomType"
        @confirm="onConfirmRoom"
        @cancel="showAre=false"
      />
    </van-popup>
    <van-popup v-model="showTimeRemove" position="bottom" :style="{ height: '50%' }">
      <van-datetime-picker
        v-model="currentDate"
        type="datetime"
        title="选择完整时间"
        :min-date="minDate"
        :max-date="maxDate"
        @confirm="confirms"
        @cancel="showTimeRemove=false"
      />
    </van-popup>
  </div>
</template>
<script>
// import { areaList } from '@vant/area-data'
import Vue from 'vue'
import { Switch, Cell, Field, Collapse, CollapseItem, Toast, Icon, Picker, Popup, DatetimePicker, CellGroup, Dialog } from 'vant'
Vue.use(Switch).use(Cell).use(Field).use(Collapse).use(CollapseItem).use(Icon).use(Picker).use(Popup).use(DatetimePicker).use(CellGroup).use(Dialog).use(Toast)
import { Button } from 'vant'
import { Area } from 'vant'
import { RadioGroup, Radio } from 'vant'
Vue.use(Radio)
Vue.use(RadioGroup)
Vue.use(Area)
Vue.use(Button)
import $api from '@/api/index'
import { checkPhone } from '@/utils/validate'
import { mapGetters } from 'vuex'
export default {
  components: {
  },
  data() {
    return {
      room: {
        'belongOrganizationCode': '',
        organizationName: '',
        'createId': '',
        'disinfectionOver': '',
        'floor': '',
        'roomNum': '',
        'status': 0,
        'type': 0,
        typeText: '',
        statusText: '',
        buildNo: '',
        roomTimeText: '',
        roomTimeType: ''

      },
      currentDate: '',
      show: true,
      id: '',
      btnName: '确认录入',
      menuTreeArr: [],
      showAre: false,
      showType: false,
      showTimeRemove: false,
      columnAre: [{ text: '空闲', id: 1, disabled: false }, { text: '占用', id: 2, disabled: false }, { text: '消杀', id: 3, disabled: false }, { text: '停用', id: 4, disabled: false }],
      columnType: [{ text: '单人间', id: 1, disabled: false }, { text: '标间', id: 2, disabled: false }, { text: '其他', id: 3, disabled: false }],
      roomType: [{ text: '24小时', id: 1, disabled: false }, { text: '48小时', id: 2, disabled: false }, { text: '72小时', id: 3, disabled: false }],
      showRoomType: false
    }
  },
  computed: {
    ...mapGetters([
      'reportId',
      'reportName',
      'parentName',
      'createId',
      'nation',
      'location'
    ]),
    showTitlePaddingTop() {
      return this.$store.state.user.showTitlePaddingTop
    }
  },
  beforeCreate() {
    this.$dd.hideTitleBar()
    this.$dd.showTitleBar()
  },
  activated() {
    this.$dd.hideTitleBar()
    this.$dd.showTitleBar()
  },
  mounted() {
    this.$dd.hideTitleBar()
    this.$dd.showTitleBar()
    this.room.organizationName = this.reportName
    this.room.belongOrganizationCode = this.reportId
    const title = this.$route.query.id ? '修改房间信息' : '新增房间信息'
    this.$dd.ready(() => {
      this.$dd.setTitle({
        title: title
      })
    })
    if (this.$route.query.id) {
      this.id = this.$route.query.id
      this.room = JSON.parse(this.$route.query.message)
      this.room.statusText = this.columnAre.filter((arg) => this.room.status === arg.id)[0].text
      this.room.typeText = this.columnType.filter((arg) => this.room.type === arg.id)[0].text
      this.room.roomTimeText = this.roomType.filter((arg) => this.room.roomTimeType === arg.id)[0].text

      this.btnName = '确认修改'
      // $api.user.organizationMenuTree().then(res => {
      //   this.person.sysUserRoleRelList = this.person.sysUserRoleRelList ? this.person.sysUserRoleRelList : []
      // }, error => {
      //   Toast(error?.msg?.data)
      // })
    } else {
      this.btnName = '确认录入'
      this.id = ''
    }

    if (this.$until.h5userAgent() === 1) {
      this.$store.dispatch('user/showTitle', true)
    }
  },
  beforeDestroy() {
    this.$dd.hideTitleBar()
  },
  destroyed() {
    this.$dd.hideTitleBar()
  },
  methods: {
    goback() {

    },
    saveInfo() {
      if (!this.room.status) {
        Toast('状态不能为空')
        return
      }
      if (!this.room.type) {
        Toast('类型不能为空')
        return
      }

      if (!this.room.roomNum) {
        Toast('房间数不能为空')
        return
      }
      if (!this.room.floor) {
        Toast('房间层数不能为空')
        return
      }
      if (!this.room.roomTimeType) {
        Toast('房间启用类型不能为空')
        return
      }

      $api.user.addRoom(this.room).then(res => {
        this.show = false
        this.$store.dispatch('user/delView', this.$route.name)
        this.$store.dispatch('user/refresh', true)
        this.$store.dispatch('user/delView', 'AddRoom')
        this.$router.go(-1)
      }, error => {
        Toast(error.data ? error.data : '操作失败,请稍候重试!')
        console.log(error)
      })
    },

    submit() {
      if (this.id) {
        this.updateUserInfo()
      } else {
        this.saveInfo()
      }
    },
    updateUserInfo() {
      if (!this.room.status) {
        Toast('状态不能为空')
        return
      }
      if (!this.room.type) {
        Toast('类型不能为空')
        return
      }
      if (!this.room.roomNum) {
        Toast('房间数不能为空')
        return
      }
      if (!this.room.floor) {
        Toast('房间层数不能为空')
        return
      }
      if (!this.room.roomTimeType) {
        Toast('房间启用类型不能为空')
        return
      }
      this.room['id'] = this.id
      $api.user.updateRoom(this.room).then(res => {
        this.show = false
        this.$store.dispatch('user/refresh', true)
        sessionStorage.setItem('keepAlive', true)// 修改返回更新数据
        this.$router.go(-1)
      })
    },
    getAdmin() {
      if (!this.$route.query.type || this.$route.query.type === '2') {
        this.showAre = true
      }
    },
    getRoom() {
      this.showRoomType = true
    },
    getType() {
      this.showType = true
    },
    getTime() {
      this.currentDate = this.$moment(this.realTime).toDate()
      this.showTimeRemove = true
    },
    confirms(val) {
      this.room.disinfectionOver = this.dateFormat('YYYY-mm-dd HH:MM:SS', val)
      this.showTimeRemove = false
    },
    dateFormat(fmt, date) {
      let ret
      const opt = {
        'Y+': date.getFullYear().toString(), // 年
        'm+': (date.getMonth() + 1).toString(), // 月
        'd+': date.getDate().toString(), // 日
        'H+': date.getHours().toString(), // 时
        'M+': date.getMinutes().toString(), // 分
        'S+': date.getSeconds().toString() // 秒
      }
      for (const k in opt) {
        ret = new RegExp('(' + k + ')').exec(fmt)
        if (ret) {
          fmt = fmt.replace(ret[1], (ret[1].length === 1) ? (opt[k]) : (opt[k].padStart(ret[1].length, '0')))
        }
      }
      return fmt
    },
    onConfirmAre(value, index) {
      this.room.status = value.id
      this.room.statusText = value.text
      this.showAre = false
    },
    onConfirmType(value, index) {
      this.room.type = value.id
      this.room.typeText = value.text
      this.showType = false
    },
    onConfirmRoom(value, index) {
      this.room.roomTimeType = value.id
      this.room.roomTimeText = value.text
      this.showRoomType = false
    }

  }
}
</script>
<style lang="scss" scoped>
.show-code{
    width:100%;
    height:100%;

    .order-content{
        width:100%;
        height:100%;
        overflow-y: scroll;
        background-color:#f7f8fa;
        font-family: PingFangSC-Regular, PingFang SC;
    }
}
.mixing-station{
    background-color: #ffffff;
    padding:0px 10px;
    margin-top:20px;
}
.icon-class{
  width:40px;
  height:40px;
}
.order-title{
    padding: 20px 30px;
}

.content-info-submit{
  display:flex;
  align-items:center;
  justify-content:center;
  padding-top:44px;
  width:660px;
  height:88px;
  margin:0 auto;
}
::v-deep .van-button__text{
  font-weight:500;
  font-size:32px;
}
.title-message{
  padding-top:80px;
}
.van-confirm{
  width:100%;
  height:100%;
  border-radius:10px;
  box-shadow: 5px 3px 15px 0px rgba(42, 102, 234, 0.56);
}
.icon-title{
    display: flex;
    align-items: center;
}
.icon-title-content{
    padding-left: 20px;
    color: #333333;
    font-weight: Bold;
    font-size: 32px;
}
.mixing-station:not(:first-child){
    margin-top: 20px;
}

::v-deep [class*=van-hairline]::after{
    border: 0;
}
::v-deep .station{
}

 .message {
    ::v-deep .van-field__label {
      -webkit-box-flex: 0;
      -webkit-flex: none;
      -ms-flex: none;
      flex: none;
      box-sizing: border-box;
      width: 200px;
      margin-right: 16px;
      color: #646566;
      text-align: left;
      word-wrap: break-word;
  }
}
.messages{
  ::v-deep .van-field__label {
      -webkit-box-flex: 0;
      -webkit-flex: none;
      -ms-flex: none;
      flex: none;
      box-sizing: border-box;
      width: 250px;
      margin-right: 16px;
      color: #646566;
      text-align: left;
      word-wrap: break-word;
  }

}
.test .van-cell__value{
    display: flex;
    align-items:center;
}

.tests .van-cell__value{
    display: flex;
    align-items:center;
    position:relative;
}
.stop-update ::v-deep .van-cell__value{
    color:#969799;
  }

  .content-person{
    padding:40px 20px;
    font-size:28px;
    color:#646566;
  }
  ::v-deep .van-cell__value{
    font-size:28px;
    color:#646566;
    padding:0 20px;
    // color: #323233;
  }
 ::v-deep .van-cell__title{
    width:200px;
    font-size:28px;
    padding-right:15px;
  }
</style>
